// * 设置 notification/message 层级在 loading 之上
.el-message,
.el-notification {
	z-index: 99999 !important;
}

// * 设置 el-alert 边框
.el-alert.el-alert--info {
	background-color: #ecf5ff; //var(--block-tip-bg-color);
	border-left: 5px solid #409eff; //var(--el-color-primary);
	border-radius: 4px;
	.el-alert__description {
		color: #555555;
	}
}

// * 当前页面最大化 css
.main-maximize {
	.aside-split,
	.el-aside,
	.el-header,
	.el-footer,
	.tabs-box {
		display: none !important;
	}
}

// * card 卡片样式
.card {
	box-sizing: border-box;
	overflow-x: hidden;
	border-radius: 4px;
}

// * 不需要 card 卡片样式（在组件内使用 proTable 会使用到）
.no-card {
	.card {
		padding: 0;
		background-color: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
}

// * content-box (常用内容盒子)
.content-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	.text {
		margin: 20px 0 30px;
		font-size: 23px;
		font-weight: bold;
		color: var(--el-text-color-regular);
	}
	.el-descriptions {
		width: 100%;
		padding: 40px 0 0;
		.el-descriptions__title {
			font-size: 18px;
		}
		.el-descriptions__label {
			width: 200px;
		}
	}
}

// * main-box (树形表格 treeFilter 页面会使用，左右布局 flex)
.main-box {
	display: flex;
	width: 100%;
	height: 100%;
	.table-box {
		width: calc(100% - 230px);
	}
}
.el-picker-panel [slot="sidebar"],
.el-picker-panel__sidebar {
	width: auto;
}

// * table-box 表格页面样式
.table,
.table-box {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	height: 100%;

	// 表格 header 样式
	.table-header {
		.header-button-lf {
			float: left;
		}
		.header-button-ri {
			float: right;
		}
		.el-button {
			margin-bottom: 15px;
		}
	}

	// el-table 表格样式
	.el-table {
		flex: 1;
		border: 1px solid #eeeeee;
		table {
			width: 100%;
			.el-button + .el-button {
				margin-left: 5px;
			}
			.el-link + .el-link {
				margin-left: 10px;
			}
		}
		.el-table__header th {
			height: 45px;
			font-size: 15px;
			font-weight: bold;
			color: #555555;
			background-color: #f5f7fa;
		}
		.el-table__row {
			height: 45px;
			font-size: 14px;
		}

		// 设置 el-table 中 header 文字不换行，并省略
		.el-table__header .el-table__cell > .cell {
			white-space: nowrap;
		}

		// 解决表格数据为空时样式不居中问题(仅在element-plus中)
		.el-table__empty-block {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.table-empty {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		// table 中 image 图片样式
		.table-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	// 表格 pagination 样式
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		margin-top: 8px;
	}
}

// * el-table 组件大小切换样式
.el-table--small {
	.el-table__header th {
		height: 40px !important;
		font-size: 14px !important;
	}
	.el-table__row {
		height: 40px !important;
		font-size: 13px !important;
	}
}
.el-table--large {
	.el-table__header th {
		height: 50px !important;
		font-size: 16px !important;
	}
	.el-table__row {
		height: 50px !important;
		font-size: 15px !important;
	}
}
.el-table .list-table-empty {
	line-height: 20px;
	.left-icon {
		width: 55px !important;
	}
}

// * el-drawer 样式
.el-drawer {
	.el-drawer__header {
		padding: 15px 20px 14px;
		margin-bottom: 0;
		border-bottom: 1px solid var(--el-border-color-lighter);
		span {
			font-size: 17px;
			color: var(--el-text-color-primary) !important;
		}
	}
	.el-drawer__footer {
		border-top: 1px solid var(--el-border-color-lighter);
	}

	// drawer-form 中两列 form-item
	.drawer-multiColumn-form {
		display: flex;
		flex-wrap: wrap;
		.el-form-item {
			width: 47%;
			&:nth-child(2n-1) {
				margin-right: 5%;
			}
		}
	}
}

// * el-dialog 样式
.el-dialog.dialog-dense {
	.el-dialog__body {
		padding: 0;
		margin: 0;
	}
}
.el-dialog {
	.el-dialog__header {
		padding: 15px 20px;
		margin: 0;
		border-bottom: 1px solid var(--el-border-color-lighter);
		.el-dialog__title {
			font-size: 17px;
		}
	}
	.el-dialog__footer {
		padding-top: 16px;
		border-top: 1px solid var(--el-border-color-lighter);
		.el-button + .el-button {
			margin-left: 20px;
		}
	}
}
a.el-link.iconfont {
	.el-link__inner {
		padding-left: 2px;
	}
}
.el-button:focus-visible {
	outline: 0;
}
.el-button + .el-dropdown,
.el-dropdown + .el-dropdown,
.iconfont + .iconfont {
	margin-left: 12px;
}
.el-button.iconfont,
.el-link.iconfont {
	span {
		padding-left: 4px;
		font-size: 14px;
	}
}
.el-button {
	> span {
		> i.iconfont {
			padding-right: 4px;
		}
	}
}
.el-input-number {
	width: 100%;
	.el-input__wrapper {
		input {
			text-align: left;
		}
	}
}
.el-select,
.el-select-dropdown {
	width: 100%;
	.el-select-dropdown__item {
		height: auto;
	}
}
.el-alert--info.is-light {
	color: #555555;
}
.el-popper.is-light {
	// padding: 15px;
	font-size: 14px;
	box-shadow: 1px 1px 5px #cccccc;
	.el-popconfirm {
		margin: 10px 0;
	}
	.el-popconfirm__action {
		margin-top: 12px;
	}
	.el-button--small {
		height: 30px;
		font-size: 14px;
	}
}
